<script>
export default {
  name: "UpdatePwd"
}
</script>

<template>
    <el-card class="container" style="max-width: 100%">
      <template #header>
        <div class="card-header">
          <div class="updatePwd_header">
            <el-space>
              <el-icon size="24" color="#FFF" style="background-color: #3FABF9;"><Key /></el-icon>
              <span>修改密码</span>
            </el-space>
            <el-space>
              <el-button type="primary" plain icon="Edit">编辑</el-button>
              <el-button type="primary" plain icon="Back" >返回</el-button>
            </el-space>
          </div>
        </div>
      </template>
      <div class="notice">注：为了安全起见，建议各位用户能定期（三个月或半年为期）修改自己的密码，避免密码泄露。</div>
      <el-form  size="small" label-position="left" label-width="80px" >
        <el-form-item label="原密码"  required>
          <el-input type="password" style="width:320px;" />
        </el-form-item>
        <el-form-item label="新密码"  required>
          <el-input type="password" style="width:320px;" />
        </el-form-item>
        <el-form-item label="确认密码" required>
          <el-input type="password" style="width:320px;" />
        </el-form-item>
      </el-form>
    </el-card>
</template>

<style scoped>
/*外部容器*/
.container{
  height:100vh;
}
.updatePwd_header{
  display: flex;
  justify-content: space-between;
}
/*提示*/
.notice{
  color:#999;
  font-size:10px;
  font-family: '宋体',serif ;
  margin-top:-10px;
}
/*表单区域*/
.el-form{
  margin:60px auto 0;
  width: 500px;
}
</style>